<template>
    <div>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="content" class="input-with-select" @input="inputChange">
                <el-select ref="select" v-model="select" slot="prepend" placeholder="请选择" @change="changeSelection">
                    <el-option v-for="item in countrys" :key="item.value" :value="item.value">
                        <div style="display:flex;align-items:center" @click="selectClick(item)">
                            <img :src="item.value" style="height:100%" alt="">
                            <div style="margin-left:8px">{{item.label}}</div>
                        </div>
                    </el-option>
                </el-select>
            </el-input>
        </div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			content: "",
			select: "",
			countrys: [
				{
					label: "zh-cn",
					value: "http://www.maps7.com/img/country/zh-cn.png"
				},
				{
					label: "zh-tw",
					value: "http://www.maps7.com/img/country/zh-tw.png"
				},
				{
					label: "en",
					value: "http://www.maps7.com/img/country/en.png"
				},
				{
					label: "fr",
					value: "http://www.maps7.com/img/country/fr.png"
				},
				{
					label: "ru",
					value: "http://www.maps7.com/img/country/ru.png"
				},
				{
					label: "ja",
					value: "http://www.maps7.com/img/country/ja.png"
				}
			]
		};
	},
	mounted() {},
	methods: {
		changeSelection(e) {
			console.log(e, "e");
			this.$nextTick(() => {
				let path = e;
				let dom = this.$refs.select.$el.children[0].children[0];
				dom.setAttribute("placeholder", "");
				dom.value = "";
				console.log(dom, "dom");
				dom.setAttribute(
					"style",
					"background:url(" +
                        path +
                        ") no-repeat;color:#fff;background-position:center;"
				);
				// let path = this.$refs.select.selectedLabel;
				// console.log(path, "path");
				// const dom = this.$refs["select"].$el.children[0];
				// console.log(dom.childNodes, "dom.childNodes");
				// dom.childNodes.forEach((item, index) => {
				// 	if (item.nodeName == "INPUT" || item.nodeName == "BLOCK") {
				// 		dom.removeChild(dom.childNodes[index]);
				// 	}
				// });
				// const imgDom = document.createElement("block");
				// imgDom.innerHTML = '<img src="' + path + '" alt="">';
				// dom.prepend(imgDom);
				// console.log(this.$refs.select.$el.children[0], "path2");
			});
		},
		selectClick(item) {
			console.log(item, "item");
			this.$emit("countryChange", item);
			this.$emit("update:countryVal", item.label);
		},
		inputChange(val) {
			if (this.timeout) clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				console.log(val, "val");
				this.$emit("inputChange", val);
				this.$emit("update:inputVal", val);
			}, 600);
		}
	}
};
</script>
<style scoped>
.el-select /deep/ .el-input {
    width: 100px;
}
.input-with-select /deep/ .el-input-group__prepend {
    background-color: #fff;
}
</style>
